<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>电网切片(性能版)渲染</title>
    <link rel="stylesheet" href="css/demo.css" />
    <script src="js/configData.js"></script>
    <script src="libs/layerStyle.js"></script>

    <script src="libs/axios.min.js"></script>
    <script src="libs/httpService.js"></script>

    <script src="js/demo.js"></script>
  </head>

  <body>
    <div class="opt_panel">
      <button onclick="onStartDraw()">开始框选(默认矩形)</button>
      <button onclick="onEndDraw()">停止框选</button>
      <!--暂不支持捕捉-->
      <!--    <button onclick="onStartSnap()">开始捕捉</button>-->
      <!--    <button onclick="onStopSnap()">停止捕捉</button>-->
      <br />
      <button
        onClick="locate('301000',20895,[118.15994960255921, 24.474927286558042])"
      >
        定位高亮变压器
      </button>
      <button
        onClick="locate('305000',85527,[118.1599310785532, 24.47482632030777])"
      >
        定位高亮断路器
      </button>
      <button
        onClick="locate('311000',92637,[118.15999212246811,24.474849453558974])"
      >
        定位高亮母线
      </button>
      <button
        onClick="locate('300000',1234886,[118.158138692379, 24.475314253170666],16.5)"
      >
        定位高亮站房
      </button>
      <button onClick="removeHighLight()">清除高亮</button>
      <br />
      <button onClick="setLayersVisible()">仅站房显示</button>
      <button onClick="setLayersNone()">仅站房隐藏</button>
      <button onClick="showAllLayers()">显示所有图层</button>
      <br />

      <button onClick="setFilter()">过滤站房</button>
      <button onClick="removeFilter()">清除过滤条件</button>

      <br />
      <!--    <button onClick="setVectorLayerVisible()">栅格图层显示切换</button>-->
      <!--    <button onClick="setTileLayerVisible()">切片图层显示切换</button>-->
    </div>
    <div id="map"></div>
    <script>
      // function setVectorLayerVisible(){
      //     if(gridLayer){
      //         gridLayer.setVisible(!gridLayer.getVisible())
      //     }
      // }
      //
      // function setTileLayerVisible(){
      //     if(gteLayer){
      //         gteLayer.setVisible(!gteLayer.getVisible())
      //     }
      // }

      /**
       * 设置仅站房可见
       */
      // function setLayersVisible() {
      //     if (map && gteLayer) {
      //         gteLayer.setLayers(['300000'])
      //     }
      // }

      // /**
      //  * 设置仅站房不可见
      //  */
      // function setLayersNone() {
      //     if (map && gteLayer) {
      //         gteLayer.setLayers(gteLayer.getAllLayerIds(), ['300000'])
      //     }
      // }

      // /**
      //  * 设置所有图层可见
      //  */
      // function showAllLayers() {
      //     if (map && gteLayer) {
      //         gteLayer.setLayers(gteLayer.getAllLayerIds())
      //     }
      // }

      // /**
      //  * 仅显示电压等级码值为35,37的站房
      //  */
      // function setFilter() {
      //     map.setCenter({lng: 118.19176842673255, lat: 24.61173361645153})
      //     map.setZoom(9.5)
      //     gteLayer.setLayersFilter({
      //         '300000': ['any',['in', 'dydj', 35, 37],['==','oid',74948]]
      //     })
      // }

      // /**
      //  * 移除站房过滤条件，显示所有站房
      //  */
      // function removeFilter() {
      //     gteLayer.setLayersFilter(null)
      // }

      // function removeHighLight() {
      //     if (highLightParam) {
      //         map.egis.selectionSet.removeDevs(highLightParam, true)
      //     }
      // }

      // let highLightParam = null

      function locate(typeId, oid, center, zoom = 21.9) {
        map.setCenter(center)
        map.setZoom(zoom)
        map.egis.selectionSet.clear()
        highLightParam = {}
        highLightParam[typeId] = [oid]
        map.egis.selectionSet.setDevs(highLightParam, true)
      }

      // selectToolOptions = {}

      // function onStartDraw() {
      //     //框选工具开启后的操作方式为：1.点击地图确定第一个点，2.移动鼠标改变矩形大小,3.点击鼠标确定第二个点
      //     selectTool.enable()
      // }

      // //关闭框选工具
      // function onEndDraw() {
      //     selectTool.disable(true)
      // }

      mapOptions = {
        maxZoom: 21.9,
        zoom: 11,
        center: { lng: 118.22360047593236, lat: 24.554283775584125 },
      }

      //雪碧图和描述文件的路径
      let resPath = location.pathname.split('/')
      resPath.pop()
      resPath = resPath.join('/')
      let spritePath = location.origin + resPath + '/assets/tileExt/sprite'
      //切片图层的样式
      gridTileExtLayerOptions = {
        urls: [msServiceUrl + '/mapservice/mapexport/vectile/{z}/{x}/{y}.sg'],
        // urls: ['http://27.196.200.206:21040/tiles/vectorserver/pbf'],
        layerConf: layerJson,
        spriteUrl: spritePath,
        sourceOptions: {
          maxzoom: 22,
        },
      }

      function initPage() {
        // egisV2.options.powerGridDevsType = ''
        initGridTileExtLayer()
        gteLayer.on('click', (e) => {
          console.log(e.features)
        })
        // mapServiceUrl = msServiceUrl + '/mapservice/mapexport/vecformat'
        // initGridLayer()
        //初始化选择工具
        initSelectTool()
      }

      window.onload = function() {
        loadGeoMap_ms(initPage)
      }
    </script>
  </body>
</html>
